<template>
	<u-popup :show="show" mode="bottom" :mask-close-able="true" :round="20" :closeable="false" close-icon-pos="top-right">
		<view class="modal-box page_box">
			<view class="modal-head u-flex u-flex-between u-w-100s u-p-20">
				<button class="u-reset-button back-btn" @tap="close()">取消</button>
				<text class="head-title" style="font-size: 32rpx;width: 75%;text-align: center;">选择用户</text>
				<button class="u-reset-button notice-btn" style="color: #3FA897" @tap="confirm()">提交</button>
			</view>
			<view class="modal-content u-flex u-flex-column u-flex-items-start u-m-t-10 u-m-b-100 u-w-100s ">
                <u-search class="shousuo" :custom-style="{'width':'95%!important','border-radius':'20rpx'}" v-model="searchVal" :clearabled="true" :bg-color="'#f1efef'" :search-icon-color="'#333'" :color="'#333'" :placeholder-color="'#ccc'" :show-action='false' margin="20rpx auto 0rpx" placeholder="请输入用户手机号" height="32"
                          @search="getUserList"></u-search>
				<scroll-view scroll-y="true" class="modal-content">
					<view @click="chooseItem(item)" class="u-flex u-p-t-30 u-p-l-20 u-p-r-20 u-p-b-30 u-w-100s u-flex-1 u-flex-between"
					      style="border-bottom: 2rpx solid #EBEBEB;" v-for="(item, index) in userList" :key="item.id">
						<view class="u-flex">
							<view>{{ item.nickname+' '+item.mobile }}</view>
						</view>
						<u-icon name="checkmark-circle" :color="'#30AA4D'" v-if="idCopy == item.mobile"
						       style="width: 32rpx;height: 32rpx;"></u-icon>
					</view>
				</scroll-view>
			</view>
			<view class="modal-foot u-flex u-row-center u-col-center">
				<view class="u-flex u-row-around u-w-100s">
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
/**
 */
export default {
	name: 'u-picker',
	props:{
		show: {
			type: Boolean,
			default: false
		},
		userId:{
			type: String,
			default: ''
		},
		userName:{
			type: String,
			default: ''
		}
	},
	data() {
		return {
			nameCopy: '',
			idCopy: '',
			userList: [],
			//模糊搜索的字段
			searchVal:''
		}
	},
	watch: {
	},
	methods: {
		searchData(){
			console.log("===this.key",this.key)
			this.$emit('searchData',this.key)
		},
		chooseItem(item){
			this.idCopy = item.mobile
			this.nameCopy = item.mobile
		},
		close(){
			this.$emit('close')
		},
		confirm(){
			console.log("=====this.idCopy,this.nameCopy",this.idCopy,this.nameCopy)
			this.$emit('confirm',this.idCopy.toString(),this.nameCopy)
		},
		getUserList(){
			var that = this;
			that.userList = [];
			that.$Api.merchant.getUserList(
				{
					mobile:that.searchVal
				}
			).then(res=>{
				that.userList=res.data;
			})
		},
	},
	mounted() {
		this.getUserList()
		this.idCopy = JSON.parse(JSON.stringify(this.userId))
		this.nameCopy = JSON.parse(JSON.stringify(this.userName))
	},
}
</script>

<style lang="scss" scoped>
.modal-content{
	max-height: 55vh;
}
.u-w-100s{
	width: 100%;
}
</style>
